<template>
	<div class="singer">
		<!-- 歌手 -->
		<div class="header">
			<div>
				<div class="title"><span>语种</span></div>
				<div class="titleitem"><span @click="languagesclick(item)" :class="{itemspan:languages === item.id}" 
					 v-for="(item,index) in languagesList"
					 :key="index">{{item.data}}</span></div>
			</div>
			<div>
				<div class="title"><span>分类</span></div>
				<div class="titleitem"><span @click="classificationclick(item)" :class="{itemspan:classification === item.id}"
					 v-for="(item,index) in classificationList" 
					 :key="index">{{item.data}}</span></div>
			</div>
			<div>
				<div class="title"><span>筛选</span></div>
				<div class="titleitem"><span @click="screenclick(item)" :class="{itemspan:screen === item}" 
				     v-for="(item,index) in screenList"
					 :key="index">{{item}}</span></div>
			</div>
		</div>
		<div class="content">
			<div class="wholesongsheet-tatle-main">
				<div @click="singerclick(item)" class="wholesongsheet-tatle-main-song" v-for="(item,index) in list" :key="index">
					<img v-lazy="item.img1v1Url" />
					<p>{{item.name}}</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				languages: -1,
				classification: -1,
				screen: '热门',
				languagesList: [{
						id: -1,
						data: '全部'
					},
					{
						id: 7,
						data: '华语'
					},
					{
						id: 96,
						data: '欧美'
					},
					{
						id: 8,
						data: '日本'
					},
					{
						id: 16,
						data: '韩国'
					},
					{
						id: 0,
						data: '其他'
					}
				],
				classificationList: [{
						id: -1,
						data: '全部'
					},
					{
						id: 1,
						data: '男歌手'
					},
					{
						id: 2,
						data: '女歌手'
					},
					{
						id: 3,
						data: '乐队'
					}
				],
				screenList: ["热门", 'A', "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U", "V", "W", "X", "Y", "Z"
				]
			}
		},
		components: {

		},
		methods: {
			singerclick(data){
				this.$router.push({name:'singerdetails',params:{data:data}});
			},
			getartist() {
				console.log(this.screen == '热门' ? -1 : this.screen.toLowerCase())
				let obj = {
					type: this.classification,
					area: this.languages,
					initial: this.screen == '热门' ? -1 : this.screen.toLowerCase()
				}
				this.$api.artist(obj).then(res => {
					console.log(res)
					this.list = res.artists;
				})
			},
			screenclick(data) {
				this.screen = data;
				this.getartist();
			},
			classificationclick(data) {
				this.classification = data.id;
				this.getartist();
			},
			languagesclick(data) {
				this.languages = data.id;
				this.getartist();
			}
		},
		created() {
			this.getartist()
		}
	}
</script>

<style scoped="scoped">
	.header {
		width: 100%;
	}

	.itemspan {
		color: red;
		background-color: #FCE1E5;
		border-radius: 10px;
	}

	.header .title {
		display: flex;
		width: 100px !important;
	}

	.header div {
		margin: 5px 0;
		display: flex;
	}

	.titleitem span {
		cursor: pointer;
	}

	.titleitem span:hover {
		background-color: #FCE1E5;
		border-radius: 10px;
	}

	.titleitem {
		width: calc(100%);
		display: flex;
		flex-wrap: wrap;
	}

	.header div span {
		padding: 3px 8px;
		margin: 10px 15px;
	}

	.content {
		width: 100%;
	}

	.wholesongsheet-tatle-main {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-right: -10px;
	}

	.wholesongsheet-tatle-main-song {
		position: relative;
		width: 188px;
		margin: 10px;
	}

	.wholesongsheet-tatle-main-song img {
		width: 188px;
		height: 188px;
		cursor: pointer;
		border-radius: 10px;
	}

	.wholesongsheet-tatle-main-song p {
		height: 40px;
		width: 100%;
	}
</style>
